<template>
  <div class="box">
    <div class="magnifier-container">
      <div
        class="magnifier-mian"
        @mousemove="glassMoveHandle"
        @mouseleave="glassLeaveHandle"
      >
        <img ref="orginImg" :src="src" alt="" />
        <div ref="magnifierCover" class="magnifier-cover"></div>
      </div>
      <ul class="magnifier-img-list" @mousemove="imgMoveHandle">
        <li
          v-for="item in img"
          :key="item.src"
          :src="item.src"
          :class="{ active: item.src === src }"
        >
          <img :src="item.src" alt="" :data-src="item.src" />
        </li>
      </ul>
      <div ref="magnifierBig" class="magnifier-big"></div>
    </div>
    <ul class="more">
      <li>
        <p>销量人气</p>
        <p>200+</p>
        <p>
          <i class="iconfont icon-task-filling" data-v-ca3db56a=""></i>
          销量人气
        </p>
      </li>
      <li>
        <p>商品评价</p>
        <p>400+</p>
        <p>
          <i class="iconfont icon-comment-filling" data-v-ca3db56a=""></i>
          查看评价
        </p>
      </li>
      <li>
        <p>收藏人气</p>
        <p>600+</p>
        <p>
          <i class="iconfont icon-favorite-filling" data-v-ca3db56a=""></i>
          收藏商品
        </p>
      </li>
      <li>
        <p>品牌主页</p>
        <p>苏宁电器</p>
        <p>
          <i class="iconfont icon-dynamic-filling" data-v-ca3db56a=""></i>
          品牌信息
        </p>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "LoupeViews",
  props: {
    img: Array,
    // coversrc: {
    //   type: String,
    //   default: "/images/image1.jpg", // 放大镜遮罩图片
    // },
    // srcs: {
    //   // 需要发大的图片的路径 和大图路径
    //   type: Array,
    //   default: () => img,
    // },
  },
  data() {
    return {
      src: "", // 当前选中第一张图片
    };
  },
  mounted() {
    this.src = this.img[0].src; //  默认选中第一张图片
    this.$nextTick(() => {
      this.$refs.magnifierCover.style.backgroundImage = `url(${this.img[0].src})`; // 设置遮罩图片
      this.$refs.magnifierBig.style.backgroundImage = `url(${this.img[0].src})`; //设置大图
    });
  },
  methods: {
    /* 鼠标移入事件 */
    imgMoveHandle: function (event) {
      let { src } = event.target.dataset;
      if (src) {
        let srcObj = this.img.find((c) => c.src === src);
        if (srcObj) {
          this.src = srcObj.src;
          this.$refs.magnifierBig.style.backgroundImage = `url(${srcObj.bigsrc})`;
        }
      }
    },
    /** 放大镜移入 **/
    glassMoveHandle: function (event) {
      // 鼠标的位置
      let x = event.clientX,
        y = event.clientY;
      // 获取元素
      let imgEl = this.$refs.orginImg.getBoundingClientRect();
      // 获取元素左上角的坐标
      let cx = imgEl.left,
        cy = imgEl.top;
      let coverEl = this.$refs.magnifierCover.getBoundingClientRect();
      let tx = x - cx - coverEl.width / 2;
      let ty = y - cy - coverEl.height / 2;
      let maxX = imgEl.width - coverEl.width;
      if (tx < 0) tx = 0;
      else {
        tx = tx > maxX ? maxX : tx;
      }
      let maxY = imgEl.height - coverEl.height;
      if (ty < 0) ty = 0;
      else {
        ty = ty > maxY ? maxY : ty;
      }
      this.$refs.magnifierCover.style.display = "block";
      this.$refs.magnifierBig.style.display = "block";
      this.$refs.magnifierBig.style.backgroundPosition = `${
        (tx / maxX) * 100
      }% ${(ty / maxY) * 100}%`;
      this.$refs.magnifierCover.style.left = `${tx}px`;
      this.$refs.magnifierCover.style.top = `${ty}px`;
    },
    /***移出事件*/
    glassLeaveHandle: function () {
      this.$refs.magnifierCover.style.display = "none";
      this.$refs.magnifierBig.style.display = "none";
    },
  },
};
</script>
 
<style lang="scss" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3568705 */
  src: url('//at.alicdn.com/t/c/font_3568705_2nddyrqj3ut.woff2?t=1667199535727') format('woff2'),
       url('//at.alicdn.com/t/c/font_3568705_2nddyrqj3ut.woff?t=1667199535727') format('woff'),
       url('//at.alicdn.com/t/c/font_3568705_2nddyrqj3ut.ttf?t=1667199535727') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-comment-filling:before {
  content: "\e689";
}

.icon-dynamic-filling:before {
  content: "\e68a";
}

.icon-favorite-filling:before {
  content: "\e68b";
}

.icon-task-filling:before {
  content: "\e68c";
}

.box {
  width: 480px;
  width: 580px;
  height: 600px;
  padding: 30px 50px;
  padding-left: 10px;
  box-sizing: border-box;
}
.magnifier-container {
  width: 480px;
  position: relative;
  display: flex;
  .magnifier-mian {
    position: relative;
    width: 400px;
    height: 400px;
    margin-bottom: 15px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .magnifier-cover {
      display: none;
      position: absolute;
      top: 0;
      left: 50px;
      width: 140px;
      height: 140px;
      border: 1px solid #27ba9b;
    }
  }
  .magnifier-big {
    position: absolute;
    display: none;
    top: 0;
    left: 480px;
    width: 400px;
    height: 400px;
    background-size: 287%;
    z-index: 100;
  }
  ul {
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
    list-style: none;
    li {
      margin-left: 10px;
      margin-bottom: 10px;
      img {
        display: block;
        width: 68px;
        height: 68px;
      }
    }
    li.active {
      border: 2px solid #27ba9b;
    }
  }
}
.more{
  display: flex;
  width: 400px;
  align-items: center;
  text-align: center;
  height: 140px;
  li{
    position: relative;
    width: 100px;
    p{
      font-size: 14px;
    }
    p:first-child{
      color: #999;
    }
    p:nth-child(2){
      color: #cf4444;
      margin-top: 10px;
    }
    p:last-child{
      color: #666;
      margin-top: 10px;
      i{
        color: #27ba9b;
        font-size: 14px;
        margin-right: 2px;
      }
    }
  }
  li:nth-child(1)::after{
    border-left: none;
  }
  li::after{
    position: absolute;
    top: 10px;
    left: 0;
    height: 60px;
    border-left: 1px solid #e4e4e4;
    content: "";
  }
}
</style>